<!-- 商家订单管理 -->
<template>
	<view class="container">
		<view class="order_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" dark :background-color="transparentColor" status-bar title="待支付订单" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 主体内容区域 -->
		<view class="order_main">
			<!-- 搜索栏及筛选区 -->
			<view class="order_main_search">
				<!-- 搜索框区域 -->
				<view class="order_main_search_out">
					<view class="order_main_search_out_flex">
						<view class="order_main_search_out_flex_input">
							<input type="text" placeholder="请输入需要搜索的内容" />
						</view>
						<view class="order_main_search_out_flex_icon">
							<img src="/static/搜索.png" />
						</view>
					</view>
				</view>
				<!-- 筛选区域 -->
				<view class="order_main_options_out">
					<view class="order_main_options_out_count">
						共3条
					</view>
					<view class="order_main_options_out_options">
						待服务
						<img src="/static/下箭头.png" />
					</view>
				</view>
			</view>
			<!-- 列表区域 -->
			<view class="order_main_list">
				<view class="order_contain_list">
					<!-- 订单编号区域 -->
					<view class="order_contain_list_top">
						<view class="discount_coupon_containt_order_my">
							订单号：2021010831213
						</view>
						<view url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							￥500
						</view>
					</view>
					<!-- 中间内容区域 -->
					<view class="order_contain_list_center">
						<view class="order_contain_list_center_one">
							下单用户: 张三丰
						</view>
						<view class="order_contain_list_center_two">
							预约时间: 2023-03-10 11:00
						</view>
						<view class="order_contain_list_center_three">
							服务项目:宝马X5加装轮、清洁车辆、汽车美容
						</view>
					</view>
					<!-- 下方功能区域 -->
					<view class="order_contain_list_bottom">
						<view class="order_contain_list_bottom_left">
							下单时间:2022-10-12 11:09
						</view>
						<!-- 查看详情 -->
						<view class="order_contain_list_bottom_right"> 
							<navigator url="/pacakageOrder/pages/merchantOrderDetials/merchantOrderDetials" class="order_contain_list_bottom_right_monad">
								查看详情 
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
.order_header {
	height: 400rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* 主体内容区域开始 */
.order_main {
	padding: 0 20rpx;
	position: relative;
	top: -250rpx;
}
/* 搜索区域开始 */
/* 搜索框区域开始 */
.order_main_search_out {
	padding: 0 20rpx;
}
.order_main_search_out_flex {
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	border-radius: 40rpx;
	background-color: #fff;
}
.order_main_search_out_flex_input {
	width: 600rpx;
	border-radius: 40rpx 0 0 40rpx;
}
.order_main_search_out_flex_input>input {
	height: 80rpx;
	line-height: 80rpx;
	width: 600rpx;
	border-radius: 40rpx 0 0 40rpx;
	padding-left: 20rpx;
	font-size: 22rpx;
}
.order_main_search_out_flex_icon {
	width: 70rpx;
	border-radius: 0 40rpx 40rpx 0;
}
.order_main_search_out_flex_icon>img {
	width: 36rpx;
	height: 36rpx;
	vertical-align: middle;
	margin-top: -6rpx;
}
/* 搜索框区域结束 */
/* 筛选区域开始 */
.order_main_options_out {
	padding: 20rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	justify-content: space-between;
}
.order_main_options_out_count {
	width: 100rpx;
	text-align: center;
}
.order_main_options_out_options {
	width: 120rpx;
	text-align: center;
}
.order_main_options_out_options>img {
	width: 30rpx;
	height: 30rpx;
	vertical-align: middle;
	margin-left: 10rpx;
}
/* 筛选区域结束 */
/* 搜索区域结束 */
/* 列表区域开始 */
/* 内容头部区域开始 */
.order_contain_list {
	padding: 20rpx 30rpx 0;
	background-color: #fff;
	border-radius: 16rpx;
}
.order_contain_list_top {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	border-bottom: 8rpx solid #F7F7F7;
	font-size: 28rpx;
}
.discount_coupon_containt_order_my {
	font-size: 32rpx
}
.discount_coupon_containt_order_count {
	color: #FF4000;
}
/* 内容头部区域结束 */
/* 内容中间区域开始 */
.order_contain_list_center {
	padding: 16rpx 0;
	font-size: 26rpx;
	border-bottom: 4rpx solid #F7F7F7;
}
.order_contain_list_center>view {
	height: 56rpx;
	line-height: 56rpx;
}
.order_contain_list_center_two {
	display: flex;
}
/* 内容中间区域结束 */

/* 内容底部区域开始 */
.order_contain_list_bottom {
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
}
.order_contain_list_bottom_right {
	height: 80rpx;
	line-height: 80rpx;
	width: 130rpx;
	display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: space-between;
}
.order_contain_list_bottom_right_evaluate,.order_contain_list_bottom_right_monad {
	width: 130rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 10rpx;
}
.order_contain_list_bottom_right_evaluate {
	background-color: #BFBFBF;
	color: #fff;
	font-size: 22rpx;
}
.order_contain_list_bottom_right_monad {
	background-color: #1E72F0;
	color: #fff;
	font-size: 22rpx;
}
.order_contain_list_bottom_right_else>view {
	width: 130rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 10rpx;
}
.order_contain_list_bottom_left {
	color: #ADADAD;
	font-size: 22rpx;
}
.order_contain_list_bottom_left>text {
	color: #FF4000;
}
/* 内容底部区域结束 */
/* 列表区域结束 */
/* 主体内容区域结束 */
</style>
